let leftArrow = document.querySelector(".leftArrow");
let rightArrow = document.querySelector(".rightArrow");
// let pointBox = document.querySelectorAll(".pointBox li");
let pointBox = document.querySelector(".pointBox li");
let ul = document.querySelector(".carouselBox ul");
let ol = document.querySelector(".pointBox ol");
let carouselBox = document.querySelector(".carouselBox");



let nowIndex = 0;


/**
 * 左箭头事件
 */
leftArrow.addEventListener("click", function() {
        // nowIndex++;
        // if (nowIndex == ul.childElementCount) {
        //     nowIndex = 0
        // }
        (++nowIndex == ul.childElementCount) && (nowIndex = 0); //简写
        ul.style.transform = `translateX(-${nowIndex}00%)`;
        //小圆点
        if (nowIndex == 0) {
            ol.children[2].classList.remove("active");
        }
        ol.children[nowIndex].classList.add("active");
        ol.children[nowIndex - 1].classList.remove("active");

    })
    /**
     * 右箭头
     */

rightArrow.addEventListener("click", function() {
        // nowIndex--;
        // if (nowIndex < 0) {
        //     nowIndex = ul.childElementCount - 1;
        // }

        (--nowIndex < 0) && (nowIndex = ul.childElementCount - 1)
        ul.style.transform = `translateX(-${nowIndex}00%)`;
        //小圆点
        if (nowIndex == 2) {
            ol.children[0].classList.remove("active");
        }
        ol.children[nowIndex].classList.add("active");
        ol.children[nowIndex + 1].classList.remove("active");

    })
    /**
     * 小圆点功能
     */

document.querySelectorAll(".pointBox li").forEach(function(item, index) {
        item.addEventListener("click", function() {
            ul.style.transform = `translateX(-${index}00%)`;
            ol.children[index].classList.add("active");
            ol.children[index - 1].classList.remove("active");
        })

    })
    // 自动播放
      let set = setInterval(function()  {     
        (++nowIndex == ul.childElementCount) && (nowIndex = 0);
        ul.style.transform = `translateX(-${nowIndex}00%)`;
    },  2000)

carouselBox.addEventListener("mouseenter", function() {
    clearInterval(set);
})
carouselBox.addEventListener("mouseleave", function() {  
    setInterval(function()  {     
        (++nowIndex == ul.childElementCount) && (nowIndex = 0);
        ul.style.transform = `translateX(-${nowIndex}00%)`;
    },  2000)
})


/**
1. 小圆点的激活类跟着动
2. 小圆点的点击事件

3. 自动轮播(定时器)  
4. 鼠标移入时 取消自动轮播  mouseenter
5. 鼠标移出时 添加自动轮播  mouseleave
 */